<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="container">
    <!-- 工程列表 -->
    <n-data-table size="small" :max-height="250" :columns="Columns" :pagination="Pagination" :data="projectList" />
  </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { NButton, DataTableColumns } from "naive-ui";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
  onGetProject,
  onProjectDelete,
} from "@/functions";
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 引入存储
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
import { storeToRefs } from "pinia";
import { useEditorStore } from "@/store"; // 画布

/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 使用存储
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
const myStore = useEditorStore(); // 画布

/* ================================================================================================ */
// 变量
/* ================================================================================================ */
/** 解构-画布 */
let { projectList, projectKey } = storeToRefs(myStore);
/** 列标 */
let Columns = [
  {
    title: "工程名称",
    key: "label",
    sorter: "default",
  },
  {
    title: "保存时间",
    key: "calendar",
    sorter: "default",
  },
  {
    title: "控制",
    key: "ctrls",
    width: 230,
    render(Row: RowData) {
      if (Row.key !== projectKey.value) {
        return [
          h(
            NButton,
            {
              style: { marginLeft: "6px" },
              size: "small",
              type: "success",
              onClick: () => onGetProject(Row.key),
            },
            { default: () => "设置当前工程" }
          ),
          h(
            NButton,
            {
              style: { marginLeft: "6px" },
              size: "small",
              type: "error",
              onClick: () => onProjectDelete(Row.key),
            },
            { default: () => "删除工程" }
          ),
        ];
      } else {
        return [
          h(
            "div",
            {
              style: { marginLeft: "6px" },
              size: "small",
            },
            { default: () => "此工程为当前工程" }
          ),
        ];
      }
    },
  },
];
/** 分页 */
let Pagination: {
  pageSize: 1000;
};
/** 行数据定义 */
type RowData = {
  table: string; // 名称
  key: string; // 键或Id
  val: string; // 变量
};
</script>

<style lang="scss" scoped>
// 容器
.container {
  width: 100%;
  max-height: 250px;
  overflow: hidden;
  user-select: none;
}
</style>
